<template>
    <div :class="['main-layout', collapse && 'collapse']">

        <aside>
            <header>好大夫医疗管理系统</header>
            <main>
                <MyMenu :collapse="collapse" />
            </main>
        </aside>
        <main>
            <nav>
                <el-button style="float: left;" size="small" @click="collapse = !collapse"
                    :icon="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" />

                <el-dropdown class="my-dropdown" trigger="click">
                    <span class="el-dropdown-link">
                        {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-on:click.native="logoutEvt"
                            icon="el-icon-switch-button">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </nav>
            <article>
                <router-view></router-view>
            </article>
        </main>
    </div>
</template>
<script>
import MyMenu from './MyMenu.vue';
export default {
    components: {
        MyMenu
    },
    data() {
        return {
            collapse: false,
            name:''
        }
    },
    methods: {
        logoutEvt() {
            sessionStorage.clear()
            this.$store.commit('common/clear')
            this.$router.push('/login')
        }
    },
    mounted(){
this.name=this.$store.getters['common/userInfo'].name
}
}
</script>

<style lang="less" scoped>
@import '../style/common.less';

.main-layout {
    display: flex;
    position: relative;
    height: 100%;

    &.collapse {
        >aside {
            flex: 0 0 64px;
        }
    }

    >aside {
        flex: 0 0 240px;
        height: 100%;
        transition: all .25s linear;
        background: @c05;
        width: 0;

        >header {
            display: block;
            position: relative;
            height: 48px;
            border-bottom: solid 1px white;
            padding-left: 64px;
            font-size: .8rem;
            color: white;
            line-height: 48px;
            overflow: hidden;
            white-space: nowrap;

            &::before {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                height: 48px;
                width: 64px;
                background: url(../images/favicon.png) center center / 26px 26px no-repeat;
            }
        }

        >main {
            display: block;
            position: relative;
            height: calc(100% - 48px);
            overflow-x: hidden;
        }
    }

    >main {
        flex: 1;
        width: 0;

        >nav {
            display: block;
            height: 48px;
            padding: 8px 12px;
            background: white;

            // 因为导航栏中有很多标签，浮动在左右--清除浮动
            &::after {
                content: '';
                display: block;
                height: 0;
                width: 0;
                clear: both;
            }
        }

        >article {
            display: block;
            position: relative;
            height: calc(100% - 48px);
            padding: 12px;
            overflow-x: hidden;
        }
    }
}

.my-dropdown {
    color: #13c2c2;
    float: right;
    padding-right: 30px;
    line-height: 32px;
}

.el-dropdown-menu__item:hover {
    color: #13c2c2;
    background-color: #e6fffb;
}
</style>
